<template>
  <div class="component-wrap"
       @dragstart="handleDragStart"
       @dragend="handleDragEnd">
      <slot/>
  </div>
</template>

<script>
  export default {
    props: {
      componentDesc: {
        type: Object,
        required: true,
        default: null
      }
    },
    name: 'ComponentDragAndDropWrap',
    methods: {
      handleDragStart (e) {
        e.dataTransfer.setData('data', JSON.stringify({
          p: {
            x: e.offsetX,
            y: e.offsetY
          },
          desc: this.componentDesc
        }))
      },
      handleDragEnd (e) {

      }
    }
  }
</script>

<style scoped lang="scss">
.component-wrap{
  width: 40px;
  height: 40px;
}
</style>
